<template>
  <view class="home-process">
    <view class="home-process__section">
      <view class="home-process__header">
        {{ translate('home_process_position_info') }}
        <text class="home-process__dept-name">{{ deptName }}</text>
      </view>

      <!-- 协同待办 -->
      <view
          class="home-process__pending-section"
          v-if="uncompleteXt && uncompleteXt > 0"
      >
        <view class="home-process__pending-header">
          {{ translate('home_process_pending_collaboration') }}
          <text class="order__tabbar-item-badge">{{ uncompleteXt }}</text>
        </view>

        <view class="home-process__pending-list">
          <view
              v-for="(item, index) in data"
              :key="index"
              class="home-process__pending-item"
          >
            {{ index + 1 }}、
            {{ formatOrderDetail(item.orderDetail) }}
          </view>
        </view>

        <view
            class="home-process__view-more"
            v-if="displayFlag"
            @click="handleUpdateClick(1)"
        >
          {{ translate('home_process_view_more') }}
        </view>
      </view>

      <!-- 财务待办 -->
      <view
          class="home-process__pending-section"
          v-if="uncompleteCw && uncompleteCw > 0"
      >
        <view class="home-process__pending-header">
          {{ translate('home_process_pending_finance') }}
          <text class="order__tabbar-item-badge">{{ uncompleteCw }}</text>
        </view>

        <view class="home-process__pending-list">
          <view
              v-for="(item, index) in caiwuData"
              :key="index"
              class="home-process__pending-item"
          >
            {{ index + 1 }}、
            {{ formatOrderDetail(item.orderDetail) }}
          </view>
        </view>

        <view
            class="home-process__view-more"
            v-if="displayFyFlag"
            @click="handleUpdateClick(2)"
        >
          {{ translate('home_process_view_more') }}
        </view>
      </view>
    </view>

    <!-- 到期提醒 -->
    <view
        class="home-process__section home-process__expire-section"
        v-if="hasExpireItems"
    >
      <view class="home-process__pending-header">
        {{ translate('home_process_pending_expiration') }}
        <text class="order__tabbar-item-badge" v-if="totalExpireCount > 0">
          {{ totalExpireCount }}
        </text>
      </view>

      <view class="home-process__expire-list">
        <view
            class="home-process__expire-item"
            v-if="expireData.qianzhengCount && expireData.qianzhengCount > 0"
        >
          {{ translate('home_process_have') }}
          <text class="home-process__expire-count">{{ expireData.qianzhengCount }}</text>
          {{ translate('home_process_person_visa') }}
          <view class="home-process__handle-btn" @click="handleChuliClick(1)">
            {{ translate('home_process_click_to_handle') }}
          </view>
        </view>

        <view
            class="home-process__expire-item"
            v-if="expireData.carCount && expireData.carCount > 0"
        >
          {{ translate('home_process_have') }}
          <text class="home-process__expire-count">{{ expireData.carCount }}</text>
          {{ translate('home_process_vehicle_insurance') }}
          <view class="home-process__handle-btn" @click="handleChuliClick(2)">
            {{ translate('home_process_click_to_handle') }}
          </view>
        </view>

        <view
            class="home-process__expire-item"
            v-if="expireData.cangkuCount && expireData.cangkuCount > 0"
        >
          {{ translate('home_process_have') }}
          <text class="home-process__expire-count">{{ expireData.cangkuCount }}</text>
          {{ translate('home_process_warehouse_expiring') }}
          <view class="home-process__handle-btn" @click="handleChuliClick(3)">
            {{ translate('home_process_click_to_handle') }}
          </view>
        </view>

        <view
            class="home-process__expire-item"
            v-if="expireData.zhufangCount && expireData.zhufangCount > 0"
        >
          {{ translate('home_process_have') }}
          <text class="home-process__expire-count">{{ expireData.zhufangCount }}</text>
          {{ translate('home_process_housing_expiring') }}
          <view class="home-process__handle-btn" @click="handleChuliClick(4)">
            {{ translate('home_process_click_to_handle') }}
          </view>
        </view>

        <view
            class="home-process__expire-item"
            v-if="expireData.bangongshiCount && expireData.bangongshiCount > 0"
        >
          {{ translate('home_process_have') }}
          <text class="home-process__expire-count">{{ expireData.bangongshiCount }}</text>
          {{ translate('home_process_office_expiring') }}
          <view class="home-process__handle-btn" @click="handleChuliClick(5)">
            {{ translate('home_process_click_to_handle') }}
          </view>
        </view>
      </view>

      <view
          class="home-process__more-dots"
          v-if="displayFyDotFlag"
      >
        .........
      </view>
    </view>
  </view>
</template>

<script>
// 导入语言文件
import zhLang from '@/utils/zh.js';
import enLang from '@/utils/en.js';
import storage from "@huntianning/miniprogram/utils/storage";

export default {
  name: 'HomeProcess',
  data() {
    return {
      countData: 0,
      currentLocale: 'zh', // 默认语言
      // 语言包
      languages: {
        'zh': zhLang,
        'en': enLang
      }
    }
  },
  mounted() {
    // 初始化语言
    let savedLanguage = uni.getStorageSync('language') || 'zh';
    const currentTimeType = storage.get('CURRENT_TIME_TYPE');
    savedLanguage=(currentTimeType === 1 || currentTimeType === '1') ? 'en' : 'zh';
    this.currentLocale = savedLanguage;
  },
  computed: {
    // 计算是否有到期项目
    hasExpireItems() {
      return (
          (this.expireData.qianzhengCount > 0) ||
          (this.expireData.carCount > 0) ||
          (this.expireData.cangkuCount > 0) ||
          (this.expireData.zhufangCount > 0) ||
          (this.expireData.bangongshiCount > 0)
      );
    },

    // 计算总到期数量
    totalExpireCount() {
      return (
          (this.expireData.qianzhengCount || 0) +
          (this.expireData.carCount || 0) +
          (this.expireData.cangkuCount || 0) +
          (this.expireData.zhufangCount || 0) +
          (this.expireData.bangongshiCount || 0)
      );
    }
  },
  methods: {
    // 翻译函数 - 与 order-delivery 页面保持一致
    translate(key) {
      try {
        const langPack = this.languages[this.currentLocale] || this.languages['zh'];
        return langPack[key] || key;
      } catch (e) {
        console.error('Translation error:', e);
        return key;
      }
    },

    // 格式化订单详情文本
    formatOrderDetail(detail) {
      if (!detail) return this.translate('home_process_no_description');
      if (detail.length > 20) {
        return detail.substring(0, 20) + '...';
      }
      return detail;
    },

    handleChuliClick(orderType) {
      if (orderType === 1) {
        uni.navigateTo({
          url: '/packages/mine/mine-people/mine-people?expire=1'
        });
      } else if (orderType === 2) {
        uni.navigateTo({
          url: '/packages/mine/mine-car/mine-car?expire=1'
        });
      } else if (orderType === 3) {
        uni.navigateTo({
          url: "/packages/mine/mine-cangku/mine-cangku?expire=1&rentalType=1"
        });
      } else if (orderType === 4) {
        uni.navigateTo({
          url: "/packages/mine/mine-cangku/mine-cangku?expire=1&rentalType=2"
        });
      } else if (orderType === 5) {
        uni.navigateTo({
          url: "/packages/mine/mine-cangku/mine-cangku?expire=1&rentalType=3"
        });
      }
    },

    handleUpdateClick(orderType) {
      if (orderType === 1) {
        uni.reLaunch({
          url: `/pages/order/order`
        });
      } else {
        uni.reLaunch({
          url: `/pages/order/order-finance`
        });
      }
    }
  },
  props: {
    data: {
      type: Array,
      default: []
    },
    caiwuData: {
      type: Array,
      default: []
    },
    deptName: {
      type: String,
      default: ''
    },
    displayFlag: {
      type: Boolean,
      default: false
    },
    displayDotFlag: {
      type: Boolean,
      default: false
    },
    displayFyFlag: {
      type: Boolean,
      default: false
    },
    displayFyDotFlag: {
      type: Boolean,
      default: false
    },
    uncompleteXt: {
      type: Number,
      default: 0
    },
    uncompleteCw: {
      type: Number,
      default: 0
    },
    huzhaoCount: {
      type: Number,
      default: 1
    },
    cheliangCount: {
      type: Number,
      default: 1
    },
    cangkuCount: {
      type: Number,
      default: 1
    },
    expireData: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="less">
.home-process {
  padding: 10rpx 15rpx;
}

.home-process__section {
  margin: 10rpx 15rpx;
  border-radius: 15rpx;
  background-color: #fff;
  padding: 10rpx;
  box-shadow: 5rpx 5rpx 8rpx #bfbfbf;
}

.home-process__header {
  font-weight: bold;
  padding: 10rpx 0;
  margin: 8rpx 12rpx;
  font-size: 28rpx;
}

.home-process__dept-name {
  color: #F47554;
  padding-left: 15rpx;
}

.home-process__pending-section {
  border-top: 2rpx dotted black;
  padding: 20rpx 0 20rpx 15rpx;
  min-height: 230rpx;
}

.home-process__pending-header {
  font-weight: bold;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.home-process__pending-list {
  min-height: 150rpx;
}

.home-process__pending-item {
  flex: 1;
  min-width: 0;
  padding: 6px 20rpx;
  font-size: 24rpx;
}

.home-process__view-more {
  float: right;
  font-weight: bold;
  text-align: center;
  width: 150rpx;
  background-color: #409049;
  color: white;
  height: 35rpx;
  border-radius: 15rpx;
  font-size: 23rpx;
  line-height: 35rpx;
  margin-top: 10rpx;
}

.home-process__expire-section {
  padding: 20rpx 20rpx;
  margin-top: 8rpx;
  margin: 15rpx 10rpx;
  min-height: 320rpx;
}

.home-process__expire-list {
  min-height: 180rpx;
}

.home-process__expire-item {
  flex: 1;
  min-width: 0;
  padding: 6px 20rpx;
  font-size: 24rpx;
  margin-bottom: 10rpx;
  position: relative;
}

.home-process__expire-count {
  color: red;
  margin: 5rpx 0rpx;
}

.home-process__handle-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  text-align: center;
  width: 110rpx;
  background-color: #409049;
  color: white;
  height: 35rpx;
  border-radius: 15rpx;
  font-size: 23rpx;
  line-height: 35rpx;
}

.home-process__more-dots {
  padding-left: 30rpx;
  font-weight: bold;
  font-size: 28rpx;
}

.order__tabbar-item-badge {
  display: inline-block;
  height: 30rpx;
  line-height: 28rpx;
  color: #fff;
  background-color: #c00;
  padding: 0 8rpx;
  border-radius: 18rpx;
  font-size: 20rpx;
  vertical-align: top;
  margin-top: 2rpx;
  margin-left: 6rpx;
  padding-top: 3rpx;
}

// 响应式处理
@media screen and (max-width: 768px) {
  .home-process__handle-btn {
    position: relative;
    transform: none;
    float: right;
    margin-top: 5rpx;
  }
}
</style>
